<template>
  <wf-el-drawer title="批量分配" :visible.sync="visible" size="520px" @closed="cancel">
    <div class="care-card-drawer-box">
      <div class="care-card-drawer-box-item">
        <i class="fa fa-file-excel-o care-card-drawer-box-icon"></i>
      </div>
      <div class="care-card-drawer-box-item">
        <span class="care-card-drawer-box-text">下载导入模板</span>
      </div>
      <div class="care-card-drawer-box-item">
        <el-button class="care-card-drawer-box-btn" @click="downloadTemplate">
          下载模板
        </el-button>
      </div>
    </div>
    <div class="care-card-drawer-box">
      <div class="care-card-drawer-box-item">
        <i class="el-icon-document care-card-drawer-box-icon"></i>
      </div>
      <div class="care-card-drawer-box-item">
        <span class="care-card-drawer-box-text">
          上传填写/修改好的员工信息表，仅支持xsl、xlsx格式的Excel文件
          <br />
          每次导入数据最多不能超过3000条
        </span>
      </div>
      <div class="care-card-drawer-box-item">
        <el-upload
          class="care-card-upload"
          action="customAction"
          :limit="1"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :on-remove="onUploadRemove"
        >
          <el-button class="care-card-drawer-box-btn">上传文档</el-button>
        </el-upload>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" :loading="saveLoading" @click="save">确定导入</el-button>
    </div>
    <import-user-error ref="importUserError" @on-ok="cancel" />
    <import-user-progress ref="importUserProgress" />
  </wf-el-drawer>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { isExcel } from '@/utils/regExpUtil';
  import ImportUserError from '../modal/ImportUserError';
  import ImportUserProgress from '../modal/ImportUserProgress';
  import { batchImportUser } from '@/api/careCard';
  import { uploadFlie } from '@/api/upload';
  import { getRequestTag } from '@/api/base';
  import { download } from '@/utils/download';

  export default {
    components: { ImportUserError, ImportUserProgress },
    data() {
      return {
        visible: false,
        organizationId: 0,
        fileList: [],
        filePath: '',
        saveLoading: false,
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      isClient() {
        return !!this.userInfo.isClient || false;
      },
      uploadData() {
        return {
          organizationId: this.organizationId,
        };
      },
    },
    methods: {
      open(organizationId) {
        this.organizationId = organizationId;
        this.visible = true;
        this.filePath = '';
      },

      async save() {
        if (this.filePath !== '') {
          this.saveLoading = true;
          const res = await getRequestTag();
          const requestTag = res.data;
          this.$refs['importUserProgress'].open(requestTag);
          const { data } = await batchImportUser({
            filePath: this.filePath,
            organizationId: this.organizationId,
            requestTag,
          });
          this.$refs['importUserProgress'].hide();
          if (data) {
            this.$refs['importUserError'].open(data);
          }
          this.saveLoading = false;
        }
        this.cancel();
      },
      cancel() {
        this.visible = false;
        this.organizationId = 0;
        this.filePath = '';
        this.fileList = [];
      },
      async downloadTemplate() {
        const filepath =
          'https://pay2live.oss-cn-shenzhen.aliyuncs.com/shanglike/20200926105131wilB.xls';
        download(filepath, '导入模板.xls');
      },
      beforeUpload(file) {
        const _isExcel = isExcel(file.name);
        if (!_isExcel) {
          this.$message.error('支持格式：xls、xlsx');
        }
        if (_isExcel) {
          this.onUpload(file);
        }
        return false;
      },
      onUploadRemove() {
        this.filePath = '';
        this.fileList = [];
      },
      async onUpload(file) {
        let _flie = file;
        if (this.isClient) {
          const { electronReadFile } = require('@/utils/electronUpload');
          _flie = await electronReadFile(_flie.path);
        }
        const formData = new FormData(); //创建form对象
        formData.append('file', _flie);
        const { data = null } = await uploadFlie(formData);
        if (data) {
          this.fileList.push({
            name: file.name,
            url: data.filePath || '',
          });
          this.filePath = data.filePath || '';
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .care-card-drawer-box {
    text-align: center;
    padding: 30px;
    margin: 10px 0;
    background-color: #f8f8fa;
    border-radius: 5px;
  }
  .care-card-drawer-box-item {
    padding: 15px 0;
  }
  .care-card-drawer-box-icon {
    font-size: 40px;
    color: #4276ee;
  }
  .care-card-drawer-box-btn {
    width: 400px;
  }
  .care-card-drawer-box-text {
    color: #7f848b;
  }
</style>
